<template>
    <glsx-dialog :show="value" title="新增热门搜索" @close="closeDialog()">
        <div class="">
            <el-form :inline="true" size="small">
                <el-form-item label="关键词：" class="is-required">
                    <el-input v-model="term" placeholder="请输入关键词"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-button round icon="el-icon-plus" :disabled="!term" @click="addLabel">添加</el-button>
                </el-form-item>
            </el-form>

            <div class="label_list">
                <el-tag class="el_tag" v-for="tag in tagList" :key="tag.name" closable @close="removeLabel(tag)">
                    {{ tag.name }}
                </el-tag>
            </div>

        </div>
        <div slot="footer">
            <el-button type="primary" size="small" @click="closeDialog()">保存</el-button>
            <el-button type="default" size="small" @click="closeDialog()">取消</el-button>
        </div>
    </glsx-dialog>
</template>
<script>
import { showToast } from '@/common/util';
import { ADD_HOT_KEYWORDS, DELETE_HOT_KEYWORDS,GET_HOT_KEYWORDS_OPTIONS } from '@/http/information'
export default {
    name: "HotWords",
    props: {
        value: {
            type: Boolean,
            default: false
        },
        type: {
            type: [String, Number],
            default: '1',   //1医院，2医生，3材料
        }
    },
    watch:{
        value:{
            handler:function(n){
                if(n){
                    this.getList()
                }
            },
            immediate:true
        }
    },
    data() {
        return {
            addForm: {},
            tagList: [],
            term: ''
        }
    },
    methods: {

        // 关闭弹框
        closeDialog() {
            this.$emit('input', false)
            this.term = ''
            this.tagList = []
        },

        // 添加标签
        addLabel() {
            let list = this.tagList;
            let term = this.term;
            let idx = list.findIndex(k => k.name == term)
            if (idx >= 0) {
                showToast({
                    message: '该关键词已存在'
                })
                return false;
            }
            let _this = this;
            let oParams = {}
            oParams.type = _this.type
            oParams.keywords = _this.term
            ADD_HOT_KEYWORDS(oParams).then(res => {
                if (res.code == 200) {
                    list.push({
                        name: term,
                        id: res.data
                    })
                    this.tagList = list;
                    this.term = ''
                }
            })


        },

        // 删除标签
        removeLabel(tag) {
            let _this = this;
            let oParams = {}
            oParams.id = tag.id
            DELETE_HOT_KEYWORDS(oParams).then(res => {
                if (res.code == 200) {
                    let list = _this.tagList.filter(k => k.name != tag.name);
                    this.tagList = list;
                }
            })

        },

        // 获取关键词列表
        getList(){
            let params = {}
            params.type = this.type
            GET_HOT_KEYWORDS_OPTIONS(params).then(res => {
                this.tagList = res.data || []
            })
        }

    }
}
</script>
<style lang="scss" scoped>
.el_tag {
    margin: 0 10px 10px 0;
}
</style>